<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta content="*" http-equiv="Access-Control-Allow-Origin"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Two Body System</title>
    <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.0/css/ion.rangeSlider.min.css"/>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            font-family: "Comic Sans MS", "Courier New", "Arial", "Helvetica", sans-serif;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-7 mt-2">
            <div id="two-body-animation" class=""></div>
        </div>
        <div class="col-md-4 my-auto">
            <form class="form">
                <div class="form-group row">
                    <label for="m1-input" class="col-md-4">M1:</label>
                    <div class="col-md-8"><input type="text" id="m1-input"></div>
                </div>
                <div class="form-group row">
                    <label for="m2-input" class="col-md-4">M2:</label>
                    <div class="col-md-8"><input type="text" id="m2-input"></div>
                </div>
                <div class="form-group row">
                    <label for="m1-radius-input" class="col-md-4">Radius of M1:</label>
                    <div class="col-md-8"><input type="text" id="m1-radius-input"></div>
                </div>
                <div class="form-group row">
                    <label for="m1-angle-input" class="col-md-4">Angle of M1:</label>
                    <div class="col-md-8"><input type="text" id="m1-angle-input"></div>
                </div>
                <div class="form-group row">
                    <label for="m1-radius-speed-input" class="col-sm-4">Radius speed of M1:</label>
                    <div class="col-md-8"><input type="text" id="m1-radius-speed-input"></div>
                </div>
                <div class="form-group row">
                    <label for="m1-angle-speed-input" class="col-md-4">Angle speed of M1:</label>
                    <div class="col-md-8"><input type="text" id="m1-angle-speed-input"></div>
                </div>
                <div class="form-group row">
                    <label for="time-delta-input" class="col-md-4">Time delta:</label>
                    <div class="col-md-8"><input type="text" id="time-delta-input"></div>
                </div>
                <div class="form-group row">
                    <label for="max-trace-keep-input" class="col-md-4">Max trace keep:</label>
                    <div class="col-md-8"><input type="text" id="max-trace-keep-input"></div>
                </div>
                <button type="button" class="btn btn-info" id="start-simulation-btn">Start</button>
                <button type="button" class="btn btn-warning" id="stop-simulation-btn">Stop</button>
            </form>
        </div>
    </div>
</div>
<script src="https://cdn.bootcss.com/echarts/4.2.1/echarts.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.0/js/ion.rangeSlider.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="odex.bundle.js"></script>
<script type="text/javascript">
    $.getScript('two-body.js').done(function () {
        const skin = 'round';
        const $m1Input = $('#m1-input');

        const sliderChange =
            function (data) {
                stopAnimation();
                const [vector1, vector2] = readOptionsForPainting(readSimulateOptions());
                updateTwoBodyFrame(vector1, vector2, [], []);
            };

        let animationId;
        const stopAnimation = function () {
            if (animationId) {
                cancelAnimationFrame(animationId);
                animationId = null;
            }
        };


        $m1Input.ionRangeSlider({
            min: 1,
            max: 10000,
            from: 3300,
            step: 1,
            skin: skin,
            onChange: sliderChange
        });

        const $m2Input = $('#m2-input');
        $m2Input.ionRangeSlider({
            min: 1,
            max: 10000,
            from: 2100,
            step: 1,
            skin: skin,
            onChange: sliderChange
        });

        const $m1RadiusInput = $('#m1-radius-input');
        $m1RadiusInput.ionRangeSlider({
            min: 0.1,
            max: 100,
            from: 3,
            step: 0.1,
            skin: skin,
            onChange: sliderChange
        });

        const $m1AngleInput = $('#m1-angle-input');
        $m1AngleInput.ionRangeSlider({
            min: 0,
            max: 360,
            from: 0,
            step: 0.1,
            skin: skin,
            postfix: '&#176;',
            onChange: sliderChange
        });

        const $m1RadiusSpeedInput = $('#m1-radius-speed-input');
        $m1RadiusSpeedInput.ionRangeSlider({
            min: 0,
            max: 15,
            from: 5,
            step: 0.01,
            skin: skin,
            onChange: stopAnimation
        });

        const $m1AngleSpeedInput = $('#m1-angle-speed-input');
        $m1AngleSpeedInput.ionRangeSlider({
            min: 0,
            max: 360,
            from: 60,
            step: 0.1,
            skin: skin,
            postfix: '&#176;',
            onChange: stopAnimation
        });

        const $timeDeltaInput = $('#time-delta-input');
        $timeDeltaInput.ionRangeSlider({
            min: 0.001,
            max: 0.1,
            from: 0.003,
            step: 0.001,
            skin: skin,
            onChange: stopAnimation
        });

        const $maxTraceKeepInput = $('#max-trace-keep-input');
        $maxTraceKeepInput.ionRangeSlider({
            min: 1000,
            max: 10000,
            from: 3000,
            step: 100,
            skin: skin,
            onChange: stopAnimation
        });

        const readSimulateOptions = function () {
            return {
                m1: parseFloat($m1Input.val()),
                m2: parseFloat($m2Input.val()),
                u1: [
                    parseFloat($m1RadiusInput.val()),
                    parseFloat($m1AngleInput.val()) / 180 * Math.PI,
                    parseFloat($m1RadiusSpeedInput.val()),
                    parseFloat($m1AngleSpeedInput.val()) / 180 * Math.PI
                ],
                timeDelta: parseFloat($timeDeltaInput.val()),
                maxTraceKeep: parseInt($maxTraceKeepInput.val())
            }
        };


        $(document).ready(function () {
            const startBtn = $('#start-simulation-btn');
            startBtn.on('click', function () {
                stopAnimation();
                const options = readSimulateOptions();
                const simulator = twoBodySimulator(options,
                    function (vector1, vector2, trace1, trace2) {
                        stopAnimation();
                        updateTwoBodyFrame(vector1, vector2, trace1, trace2);
                        animationId = requestAnimationFrame(simulator);
                    });

                simulator();
            });

            $('#stop-simulation-btn').on('click', stopAnimation);

            startBtn.trigger('click');
        });
    });
</script>
</body>
</html>